<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="main/css/view-detail.css" />
    <title>月供详情</title>
    <link rel="stylesheet" href="main/css/result.css" />
    <script src="main/js/common.js"></script>
    <script src="main/js/utils.js"></script>
  </head>
  <body>
    <div id="view-details">
      <header id="header">
        <van-tabs v-model="tabActive" title-active-color="black" title-inactive-color="#000" v-if="tabShow" @change="tabChagne">
          <van-tab title="商业贷款"></van-tab>
          <van-tab title="公积金贷款"></van-tab>
        </van-tabs>
      </header>

      <div class="ul-nav">
        <span class="section-item__span">月份</span>
        <span class="section-item__span">月供总额</span>
        <span class="section-item__span">月供本金</span>
        <span class="section-item__span">月供利息</span>
        <span class="section-item__span">剩余</span>
      </div>

      <section id="section">
        <ul class="section-ul">
          <li class="section-item" v-for="(item,index)  in list" :key="index">
            <span class="section-item__span">{{item.month}}月</span>
            <span class="section-item__span">￥{{Math.round(item.everyMonthPrice)}}</span>
            <span class="section-item__span">￥{{Math.round(item.everyMonthPrincipal)}}</span>
            <span class="section-item__span">￥{{Math.round(item.everyMonthInterest)}}</span>
            <span class="section-item__span">￥{{Math.round(item.residue)}}</span>
          </li>
        </ul>
      </section>
    </div>
    <script src="main/js/view-detail.js"></script>
  </body>
</html>
